<!-- 
  $refs: 父 -> 子
	$parent: 子 -> 父

	原理:
	- $refs: 值为对象, 包含所有被 ref 属性标识的 DOM 元素或组件实例.
	- $parent: 值为对象, 当前组件的父组件实例对象.
  -->
<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>房产: {{ house }}</h4>
		<button @click="changeToy">修改 Child1 的玩具</button>
		<button @click="changeComputer">修改 Child2 的电脑</button>
		<!-- <button @click="getAllChild($event)">获取所有的子组件实例对象</button> -->
		<button @click="getAllChild($refs)">让所有孩子的书变多</button>
		<Child1 ref="c1"/>
		<Child2 ref="c2"/>
	</div>
</template>

<script setup lang="ts" name="Father">
	import Child1 from './Child1.vue'
	import Child2 from './Child2.vue'
	import { ref, reactive } from 'vue'

	// 注意点：当访问 obj.c 的时候，底层会自动读取 value 属性，因为 c 是在 obj 这个响应式对象中的
/* 	let obj = reactive({
		a: 1,
		b: 2,
		c: ref(3)	// 在响应式对象内，自动拆包
	})
	let x = ref(4)

	console.log(obj.a)
	console.log(obj.b)
	console.log(obj.c)
	// console.log(x)
	console.log(x.value) */

	// 数据
	let house = ref(4)
	let c1 = ref()
	let c2 = ref()

	// 方法
	function changeToy() {
		c1.value.toy = '小猪佩奇'
	}

	function changeComputer() {
		c2.value.computer = '华为'
	}

	// function getAllChild(event:MouseEvent) {
	// 	console.log(event)
	// }

	function getAllChild(refs:{[key:string]:any}) {
		for (const key in refs) {
			refs[key].book += 3
		}
	}

	// 向外部提供数据
	defineExpose({house})

</script>

<style scoped>
	.father {
		background-color: rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}

	.father button {
		margin-bottom: 10px;
		margin-left: 10px;
	}
</style>

